class MyDialog extends HTMLElement {
  static get observedAttributes() {
    return ["visible"]
  }

  static style = `
  @import url("http://at.alicdn.com/t/c/font_3828430_140r7z3i943g.css");

    .mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 100;
    }
    .my-dialog {
      position: fixed;
      top: 50vh;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 300px;
      min-height: 200px;
      background-color: #fff;
      overflow: hidden;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      z-index: 101;
      display: none;
      transition: all 250ms;
    }
    .dialog-header {
      min-height: 50px;
      line-height: 50px;
      padding: 0 20px;
      background-color: #f7f7f7;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .dialog-header .title {
      font-size: 16px;
      font-weight: bold;
    }
    .dialog-header .icon-guanbi {
      font-size: 16px;
      cursor: pointer;
    }

    .dialog-body {
      padding: 20px;
    }

  
  `

  constructor() {
    super()
    const shadow = this.attachShadow({ mode: "open" })
    let _data = {
      title: this.getAttribute("title") || "",
    }
    this.render(shadow, _data)
  }

  render(shadow, data) {
    this.mask = document.createElement("div")
    this.mask.classList.add("mask")

    let style = document.createElement("style")
    style.innerHTML = MyDialog.style
    shadow.appendChild(style)

    let tmp = document.createElement("template")
    tmp.innerHTML = `
    <div class="my-dialog">
      <div class="dialog-header">
        <div class="title">
          <slot name="title">${data.title}</slot>
        </div>
        <i class="iconfont icon-guanbi" id="dialog-close"></i>
      </div>
      <div class="dialog-body">
        <slot></slot>
      </div>
    </div>
    `
    tmp.setAttribute("id", "my-dialog-template")
    document.body.appendChild(tmp)

    shadow.appendChild(
      document.getElementById("my-dialog-template").content.cloneNode(true)
    )

    shadow.querySelector("#dialog-close").addEventListener("click", () => {
      this.hide()
    })
    this.mask.addEventListener("click", () => {
      this.hide()
    })
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === "visible") {
      if (newValue === "1") {
        this.show()
      } else {
        this.hide()
      }
    }
  }

  show() {
    // document.body.appendChild(this.mask)
    this.shadowRoot.appendChild(this.mask)
    this.shadowRoot.querySelector(".my-dialog").style.opacity = 0
    this.shadowRoot.querySelector(".my-dialog").style.display = "block"
    setTimeout(() => {
      this.shadowRoot.querySelector(".my-dialog").style.opacity = 1
    }, 0)
  }

  hide() {
    // document.body.removeChild(this.mask)
    if (this.shadowRoot.contains(this.mask)) {
      this.shadowRoot.removeChild(this.mask)
    }
    this.shadowRoot.querySelector(".my-dialog").style.opacity = 0
    setTimeout(() => {
      this.shadowRoot.querySelector(".my-dialog").style.display = "none"
    }, 250)
  }
}

customElements.define("my-dialog", MyDialog)

export default MyDialog
